<template>
  <div class="fatherBox">
    <el-page-header @back="goBack" content="文章详情" style="margin-bottom: 1em">
    </el-page-header>
    <div class="head">
      <h3 style="text-align: center">{{ title }}</h3>
      <div class="info">
        <ul>
          <li style="position: relative;top: 4em;">
            文章浏览量：<i class="el-icon-video-camera">{{ clickCount }}次</i>
          </li>
          <li>
            <svg v-if="upFlag == 1" @click.stop="downGood(articleId)" class="icon"
                 style="position: relative;left: 55em;top:2em;width: 2em;height: 2em;vertical-align: middle;fill: currentColor;overflow: hidden;"
                 viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16234">
              <path
                  d="M217.1392 890.112V429.3632c0-18.6368-12.544-33.7408-28.0064-33.7408H129.3824c-28.8256 0-52.224 28.16-52.224 62.9248v402.3296c0 34.7648 23.3984 62.9248 52.224 62.9248h59.7504c15.4624 0.0512 28.0064-15.0528 28.0064-33.6896zM278.528 899.5328V419.5328c0-11.0592 7.424-20.7872 18.1248-23.552 37.7344-9.6256 124.2112-44.1344 160.9728-161.9456 22.3744-103.168 46.7456-151.8592 118.7328-146.0224 72.0384 5.8368 76.9024 75.9296 76.9024 97.3312v165.4784s-5.8368 25.2928 18.4832 27.2384c24.32 1.9456 214.1184 0 214.1184 0s104.1408-1.792 71.0656 127.5904c-28.7744 112.4864-85.76 293.5296-100.1472 338.7904a101.2224 101.2224 0 0 1-12.7488 26.368c-13.9264 20.3264-43.2128 52.992-87.9104 52.992H302.8992a24.27904 24.27904 0 0 1-24.3712-24.2688z"
                  fill="#FF623E" p-id="16235"></path>
            </svg>
            <svg v-else class="icon" @click.stop="upGood(articleId)"
                 style="position: relative;left: 55em;top:2em;width: 2em;height: 2em;vertical-align: middle;fill: currentColor;overflow: hidden;"
                 viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5975">
              <path
                  d="M715.776 958.464c-47.104 0-264.192-1.536-422.912-3.072-57.344-0.512-107.008-1.024-138.24-1.024-33.792-0.512-60.928-27.648-60.928-61.44V444.928c0-33.792 27.648-61.44 61.44-61.44h120.32c3.072 0 82.944 2.56 119.296-110.08C434.176 151.04 447.488 118.784 450.56 111.104c3.072-8.192 16.896-38.4 51.712-48.128 34.816-9.728 75.264 4.608 121.344 43.008 83.456 60.416 30.208 210.944 29.696 212.48-3.072 8.704-10.752 36.864-20.992 76.288h231.424l2.56 0.512c4.608 1.024 46.592 9.728 68.096 46.08 9.216 15.872 17.92 43.52 4.608 82.432-24.064 70.144-102.912 333.824-109.568 356.352-6.144 28.672-36.352 78.336-113.664 78.336zM154.624 444.928v448.512c31.744 0 81.408 0.512 138.24 1.024 158.208 1.024 375.296 3.072 422.4 3.072 43.52 0 51.712-23.552 53.248-29.696v-2.56l0.512-1.024c4.096-11.776 86.016-285.696 111.616-359.936 4.608-13.312 4.608-24.064 0.512-31.232-5.12-9.216-17.92-14.336-24.064-16.384h-251.392c-12.8 0-24.576-5.632-32.256-15.872-7.68-9.728-10.752-23.04-7.68-35.328 9.728-39.936 23.04-91.648 29.184-108.032 10.752-29.184 28.16-116.224-8.192-141.824l-2.048-1.536c-40.96-34.816-60.416-33.28-65.536-31.744-7.168 2.048-10.24 8.704-11.264 10.752l-0.512 2.048-0.512 1.024c-0.512 0.512-10.752 24.576-53.248 156.16C403.456 444.928 287.744 445.44 272.384 444.928h-117.76z"
                  fill="#666666" p-id="5976"></path>
              <path d="M240.128 500.736h61.44v350.72h-61.44V500.736z" fill="#666666" p-id="5977"></path>
            </svg>
          </li>
        </ul>

      </div>
    </div>

    <div v-html="articleDeatail" class="articleBox">
    </div>
  </div>
</template>

<script>
export default {
  name: "ArticleDetail",
  data() {
    return {
      articleId: this.$route.query.id,
      articleDeatail: '',
      title: '',

      userId: null,
      upFlag: 0,

      clickCount: this.$route.query.clickCount
    }
  },
  created() {
    this.getRequest('/p/ams/article/detail/' + this.articleId).then((resp) => {
      this.articleDeatail = resp.data.content
      this.title = resp.data.title
    }).then(() => {
      if (window.sessionStorage.getItem('username')) {
        this.userId = 0
        console.log(this.articleId, this.userId)
        if (this.userId) {
          this.getRequest(`/ams/article/ifLike/${this.articleId}/${this.userId}`).then((resp) => {
            if (resp.data == true) {
              this.upFlag = 1
            } else {
              this.upFlag = 0
            }
          })
        }
      }
    })
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    btnGood(articleId) {
      if (window.sessionStorage.getItem('username')) {
        console.log(articleId, this.userId)
        this.getRequest(`/ams/article/judgeLike/${articleId}/${this.userId}`).then((resp) => {
          if (resp.status == 200) {
            this.upFlag = !this.upFlag
            this.$message.success('操作成功')
          }
        })
      } else {
        this.$message.error('尚未登录，无法点赞。')
      }

    },
    downGood(articleId) {
      this.btnGood(articleId)
    },
    upGood(articleId) {
      // this.getRequest('/ams/article/judgeLike/{articleId}/')
      this.btnGood(articleId)
    }
  }
}
</script>

<style scoped>
.fatherBox {
  margin-top: 1em;
  /*margin-left: 24em;*/
  width: 59em;
  border: solid 1px gray;
  padding: 4em;
}

.articleBox {


}

.head {
  border-bottom: 2px solid lightgray;
  padding-bottom: 3em;
  margin-bottom: 3em;
}
</style>